<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
  <meta name="format-detection" content="telephone=no, email=no"/>
  <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
  <meta name="applicable-device" content="mobile"/>
  <meta name="apple-mobile-web-app-title" content="标题"/>
  <!-- 添加到主屏后的标题（iOS 6 新增） -->
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <!-- 是否启用 WebApp 全屏模式 -->
  <meta name="HandheldFriendly" content="true"/>
  <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
  <meta name="keywords" content="直播泸州"/>
  <meta name="description" content="直播泸州"/>
  <meta name="cl">
  <title>${(info.title)!}</title>
  <link rel="stylesheet" type="text/css" href="${ctx}/lztv/h5/css/globle.css">
  <script src="${ctx}/lztv/h5/js/jquery-1.8.3.min.js" type="text/javascript"></script>
  <!--<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>-->
  <!--<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/qzact/common/share/share.js"></script>-->
  <!--<script type="text/javascript" src="${ctx}/lztv/h5/js/senShare.js"></script>-->
</head>
<body style="background: #fff;">
<input style="display: none" id="newId" value="${(info.id)!}"/><!--新闻ID-->
<input style="display: none" id="newkey" value="${(info.tagKeywords)!}"/><!--新闻关键字-->

[#if info.newsType==3]
<div class="ground_video">
  <p>${(info.title)!}</p>
  <video id="video" class="videoBox" poster="${(info.detail.smallImage)!}" src="${(info.detail.video)?j_string}" controls></video>
  <!--<i class="iconFont" onclick="videoPlay('video')"></i>-->
</div>
[/#if]
[#if info.newsType==1]
<div class="ground_video">
  <img class="ifImg" src="${(info.detail.smallImage)!}" alt="">
</div>
[/#if]
[#if info.newsType==2]
<div class="ground_media">
  <span>00:00</span>
  <img src="${ctx}/lztv/h5/images/playline.png" alt="">
  <audio id="media" class="mediaBox" src="${(info.file)!}" controls></audio>
  <lable class="mediaPlay fr" onclick="mediaPlay('media')"></lable>
</div>
[/#if]
<!--video e-->
<div class="descBox">
  <h1>${(info.title)!}</h1>
  <p class="descTime">${info.publishDate?string('yy-MM-dd HH:mm')}</p>
  <p class="descName">${(info.source)!}</p>
  <div class="descCont">
    <p>${(info.textWithoutPageBreak)!}</p>
  </div>
  <p style="text-align:center"><img id="QRCode" style="width: 94%"></p>
  <p class="descEdit">责任编辑：${(info.author)!}</p>
</div>
<!--看法 s-->
<div class="descSee bordeNone" style="display:none">
  <h2>你对此事的看法?</h2>
  <ul>
    <p class='notHaveData'>暂无相关投票</p>
  </ul>
</div>
<!--看法 e-->
<!--评论 s-->
<div class="descComment">
  <h2>最新评论</h2>
  <ul>
    <p class='notHaveData'>暂无相关评论</p>
  </ul>
</div>
<!--评论 e-->

<div class="ground_box CommentRecome">
  <h2 class="title">相关新闻</h2>
  <ul>
    <p class='notHaveData'>暂无相关新闻</p>
  </ul>
</div>

<!--底部 s-->
<div class="pdDownLoad">
  <img class="pdlogo1 fl" src="${ctx}/lztv/h5/images/down_word.png" alt="">
  <a class="pdlogo2 fl" href="http://sj.qq.com/myapp/detail.htm?apkName=com.letv.app.ljodfh"> <img src="${ctx}/lztv/h5/images/down.png"
                                                                                               alt=""> </a>
  <!--<img onclick="colseTan()" class="pdlogo3 fl" src="${ctx}/lztv/h5/images/close.png" alt="">-->
</div>
<!--底部 e-->

<script src="${ctx}/lztv/h5/js/main.js" type="text/javascript"></script>
<script>
  //图片访问前缀
  const img = "http://192.168.81.70:8080";

  $(function () {
    var newId = $("#newId").val();
    var newKey = $("#newkey").val();

    $(".descCont").find("img").each(function(){
      var alt=$(this).attr("alt");

      if(null!=alt&&""!=alt){
        var altTmp=alt.toUpperCase();
        if(altTmp.endsWith("JPG")||
            altTmp.endsWith("JPEG")||
            altTmp.endsWith("PNG")||
            altTmp.endsWith("GIF")||
            altTmp.endsWith("TIFF")||
            altTmp.endsWith("PSD")||
            altTmp.endsWith("SVG")||
            altTmp.endsWith("TGA")||
            altTmp.endsWith("EPS")||
            altTmp.endsWith("ARW")
        ){
          console.log("尾缀包含图片格式"+altTmp+",跳过")
        }else{
          var html='<span class="descImgTit">'+alt+'</span>';
        }

        $(this).after(html);
      }
    })

    $.getJSON("http://192.168.81.70:8080/lztv/qrCode.json",function(dataStr){
      var data;
      if(typeof dataStr=="string"){
        data=JSON.parse(dataStr);
      }else{
        data=dataStr;
      }
      var imgUrl=data.data.imageUrl;
      if(null!=imgUrl&&""!=imgUrl){
        $("#QRCode").parent().show();
        $("#QRCode").attr("src",img+imgUrl)
      }else{
        $("#QRCode").parent().hide();
      }


    })

    //加载相关新闻
    loadRelevant(newKey,newId);
    //加载评论
    loadComment(newId);
    //加载投票
//    loadVote(newId);

    //   getVideo();//视频
    ban_s(".ground_video");
    getMedia();//音频
    //图片解析出atl属性 添加描述


  });

  /*监听播放状态*/
  function getMedia() {
    var myMedia = document.getElementById("media");
    myMedia.addEventListener('play', function () {
      $(".mediaPlay").addClass('onPlay');
      setInterval(function () {
        var curTime = myMedia.currentTime.toString();
        $(".ground_media span").html(formatTime(curTime.split(".")[0]));
      }, 1000)
    });
    myMedia.addEventListener('pause', function () {
      $(".mediaPlay").removeClass('onPlay');
    });
  }
  /*
   * 将秒数格式化时间
   * @param {Number} seconds: 整数类型的秒数
   * @return {String} time: 格式化之后的时间
   */
  function formatTime(seconds) {
    var min = Math.floor(seconds / 60),
        second = seconds % 60,
        hour, newMin, time;

    if (min > 60) {
      hour = Math.floor(min / 60);
      newMin = min % 60;
    }

    if (second < 10) { second = '0' + second;}
    if (min < 10) { min = '0' + min;}

    return time =  (min + ':' + second);
  }

  /*点击播放*/
  function mediaPlay(id) {
    var myMedia = document.getElementById(id);
    if ($(".mediaPlay").hasClass('on')) {
      myMedia.pause();
      $(".mediaPlay").removeClass('on');
    } else {
      myMedia.play();
      $(".mediaPlay").addClass('on');
    }

  }
  /*加载投票*/
  function loadVote(id) {
    try {
      $.ajax({
        url: 'http://apifcity.sctv.com:8080/getVoteListInfo',
        type: 'POST',
        crossDomain: true,
        data: {newsId: id, token: '', userId: ''},
        success: function (dataStr) {
          var data = JSON.parse(dataStr);
          var lis = data.data.voteOptionsList;
          var html = "";
          var count = data.data.voteHeadCount
          for (var v = 0; v < lis.length; v++) {
            var per = ((lis[v].selectedCount) / count).toFixed(2) * 100;
            html += '<li>' + lis[v].voteOptionTitle
                + '<div class="progressBox clearfix">'
                + '<div class="progressBar fl"><p style="width: ' + per + '%;"></p></div>'
                + '<span class="fr">' + per + '% (' + lis[v].selectedCount + '票)</span>'
                + '</div>'
                + '</li>';
          }
          $(".bordeNone ul").html(html);

        }
      });
    } catch (err) {
      $(".bordeNone ul").html("<p class='notHaveData'>暂无相关投票</p>");
    }
  }
  /*加载评论*/
  function loadComment(id) {
    try {
      $.ajax({
        url: 'http://apifcity.sctv.com:8080/getCommentList',
        type: 'POST',
        data: {requestType:0, sourceId: id,index:0,capacity:5},
        success: function (dataStr) {
          var data = JSON.parse(dataStr);
          var lis = data.data.commentList;
          var html = "";
          for (var v = 0; v < lis.length; v++) {
            html += '<li>'
                + ' <div class="CommentTx">'
                + '<p class="fl"><img src="' + img + lis[v].avatar + '" alt=""></p>'
                + ' <span>' + lis[v].nickName + '</span>'
                + ' </div>'
                + '<p class="CommentPc">' + lis[v].comment + '</p>'
                + ' </li>';
          }
          $(".descComment ul").html(html);
        }
      });
    } catch (err) {
      alert(err)
      $(".descComment ul").html("<p class='notHaveData'>暂无相关评论</p>");
    }

  }
  /*加载相关新闻*/
  function loadRelevant(key,newsId) {
    try {
      $.ajax({
        url: 'http://apifcity.sctv.com:8080/getRelateNewsList',
        type: 'POST',
        crossDomain: true,
        data: {siteNumber: 396, keyword: key,newsId:newsId},
        success: function (dataStr) {
          var data = JSON.parse(dataStr);
          var lis = data.data.list;
          var html = "";
          for (var v = 0; v < lis.length; v++) {
            html += '<li>'
                + '<a class="box" href="http://sj.qq.com/myapp/detail.htm?apkName=com.letv.app.ljodfh">'
                + '    <div class="ground_tit flex">'
                + '    <h2>' + lis[v].newsTitle + '</h2>'
                + '<p><span>' + lis[v].lable + '</span></p>'
                + ' </div>'
                + '<div class="ground_img"><img src="' + lis[v].newsImage + '" alt=""></div>'
                + '    </a>'
                + '   </li>';
          }
          $(".CommentRecome ul").html(html);
        }
      });
    } catch (err) {
      $(".CommentRecome ul").html("<p class='notHaveData'>暂无相关新闻</p>");
    }
  }

</script>
</body>
</html>